<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            width: 490px;
            height: 170px;
            border: 1px solid #000;
            padding: 10px;
            margin: 50px auto;
        }
        .box .inner{
            position: relative;
            width: 490px;
            height: 170px;
            overflow: hidden;
        }
        .box ul{
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
            width: 500%;
        }
        .box ul li{
            float: left;
        }
        .box ul li img{
            /* 去除垂直方向空隙 */
            vertical-align: top;
        }
        .box ol{
            list-style: none;
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
        }
        .box ol li{
            float: left;
            width: 20px;
            height: 20px;
            margin-left: 5px;
            background-color: #fff;
            text-align: center;
            line-height: 20px;
            /* 变小手 */
            cursor: pointer;
        }
        .box ol li :nth-child(1){
            margin-left: 0;
        }
        .box ol li.seleted{
            background-color: orange;
        }
    </style>
    <script>
        window.onload = function(){
            function $(selecter) {
                return document.querySelector(selecter)
            }
            var ollis = document.querySelectorAll("ol>li")
            var ul = document.querySelector('ul')
            //  移动距离
            var leader = 0
            //  总长
            var target = 0
            ollis.forEach((item,index)=>{
                item.onmouseover = function(){
                    ollis.forEach(item=>{
                        item.className = ''
                    })
                    item.className='seleted'
                    target = -index*490
                }
            })
            setInterval(()=>{
                leader = leader + (target - leader) / 10
                ul.style.left= leader +'px'
            },30)
        }
    </script>
</head>
<body>
    <div class="box">
        <div class="inner">
            <ul>
                <li><img src="./image/1.jpg" alt=""></li>
                <li><img src="./image/2.jpg" alt=""></li>
                <li><img src="./image/3.jpg" alt=""></li>
                <li><img src="./image/4.jpg" alt=""></li>
                <li><img src="./image/5.jpg" alt=""></li>
            </ul>
        </div>
        <ol>
            <li class="seleted">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</body>
</html>